<template>
	<div>
		<div class="gva-search-box">
			<el-form ref="searchForm" :inline="true" label-width="120" :model="searchInfo">
				<el-form-item label="废品名称">
					<el-input v-model="searchInfo.waste_name" placeholder="废品名称" />
				</el-form-item>
				<el-form-item label="时间">
					<el-date-picker v-model="data_select" type="datetimerange" start-placeholder="开始时间"
						end-placeholder="结束时间" unlink-panels value-format="YYYY-MM-DD HH:mm:ss" />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
					<el-button icon="refresh" @click="onReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="gva-table-box">
			<div class="gva-btn-list">
				<el-button type="primary" icon="plus" @click="openDialog('addApi')">创建</el-button>
			</div>
			<el-table :data="tableData" row-key="id">
				<el-table-column align="left" label="型号" min-width="150" prop="model" />
				<el-table-column align="left" label="废品名称" min-width="150" prop="waste_name" />
				<el-table-column align="left" label="品牌" min-width="150" prop="brand" />
				<el-table-column align="left" label="价格" min-width="150" prop="price" />
				<el-table-column align="left" label="描述" min-width="150" prop="desc" />
				<el-table-column align="left" label="重量" min-width="150" prop="weight" />
				<el-table-column align="left" label="规格" min-width="150">
					<template #default="scope">
						<span>{{ displayState(scope.row.type) }}</span>
					</template>
				</el-table-column>
				<el-table-column align="left" label="审核状态" min-width="150">
					<template #default="scope">
						<span>{{ displayrole_type(scope.row.is_reviewer) }}</span>
					</template>
				</el-table-column>
				<el-table-column align="left" label="备注" min-width="150" prop="notes" />
				<el-table-column align="left" label="操作" min-width="200">
					<template #default="scope">
						<span @click="fnChange(scope.row)">修改</span>
						<span style="color: #f00;margin-left: 10px;" @click="fnDelete(scope.row)">删除</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="gva-pagination">
				<el-pagination :current-page="page" :page-size="page_size" :page-sizes="[10, 30, 50, 100]"
					:total="totals" layout="total, sizes, prev, pager, next, jumper"
					@current-change="handleCurrentChange" @size-change="handleSizeChange" />
			</div>
		</div>
		<el-drawer v-model="dialogFormVisible" size="60%" :before-close="closeDialog" :show-close="false">
			<template #header>
				<span class="text-lg">{{ isChange?"修改":"新增" }}</span>
				<div>
					<el-button @click="closeDialog">取 消</el-button>
					<el-button type="primary" @click="enterDialog">确 定</el-button>
				</div>
			</template>
			<el-form ref="platForm" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="废品名称" prop="waste_name">
					<el-input v-model="form.waste_name" placeholder="废品名称" />
				</el-form-item>
				<el-form-item label="品牌" prop="brand">
					<el-input v-model="form.brand" placeholder="品牌" />
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="form.price" placeholder="价格" oninput="value=value.replace(/[^0-9.]/g,'')" />
				</el-form-item>
				<el-form-item label="描述" prop="desc">
					<el-input v-model="form.desc" placeholder="描述" />
				</el-form-item>
				<el-form-item label="重量/公斤" prop="weight">
					<el-input v-model="form.weight" placeholder="重量/公斤" oninput="value=value.replace(/[^0-9.]/g,'')" />
				</el-form-item>
				<el-form-item label="型号" prop="model">
					<el-input v-model="form.model" placeholder="型号" />
				</el-form-item>
				<el-form-item label="规格" prop="specs">
					<el-input v-model="form.specs" placeholder="规格" />

				</el-form-item>
				<el-form-item label="审核状态" prop="is_reviewer">
					<el-select v-model="form.is_reviewer" placeholder="请选择审核状态">
						<el-option v-for="item in statusOption" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="生产日期" prop="discharge_data">
					<el-date-picker v-model="form.discharge_data" type="date" placeholder="选择日期" style="width: 100%;"
						value-format="YYYY-MM-DD">
					</el-date-picker>
				</el-form-item>
				<!-- <el-form ref="uploadForm"  :model="form" :rules="rules" label-width="120px"> -->
				<el-form-item label="图片上传" prop="img" class="upload">
					<el-upload action="/api/fileUploadAndDownload/upload" :show-file-list="false"
						:on-success="uploadSuccess" :before-upload="BeforeLoad" :multiple="false">
						<div class="img-box" v-if="form.img">
							<img :src="form.img" class="img" />
						</div>
						<div class="upload-btn">
							<el-icon class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="视频上传" prop="video" class="uploadVideo">
					<el-upload action="/api/fileUploadAndDownload/upload" :show-file-list="false"
						:on-success="uploadVideoSuccess" :before-upload="BeforeLoadVideo" :multiple="false">
						<div  v-if="form.video">
							<video controls width="200" height="100">
								<source :src="form.video" type="video/mp4">
							</video>
						</div>
						<div class="upload-btn">
							<el-icon class="avatar-uploader-icon">
							<Plus />
							</el-icon>
						</div>
					</el-upload>
				</el-form-item>
				<!-- </el-form> -->
			</el-form>
		</el-drawer>
	</div>
</template>
<script setup>
	defineOptions({
		name: "wasteResourceIndex"
	});
	import {
		isImageMime,
		isVideoMime
	} from "@/utils/image";

	import {
		ref,
		onMounted,
		computed
	} from "vue";

	import {
		waste_resourceList,
		waste_resourceAdd,
		waste_resourceUpdate,
		waste_resourceDelete
	} from "@/api/subscribe";
	import {
		ElMessage,
		ElMessageBox
	} from "element-plus";

	let searchInfo = ref({

		waste_name: "",
		specs: "",
		notes: "",
		brand: "",
		price: null,
		desc: null,
		weight: "",
		model: "",
		is_reviewer: null,
		s_at: "",
		e_at: "",
		discharge_data: "",
		video: ""
	});
	let tableData = ref([
		// {
		//   id: 1,
		//   waste_name: "1",
		//   type: "1",
		//   notes: "1",
		//   brand: "1",
		//   price: "1",
		//   desc: "1",
		//   weight: "1",
		//   model: "1",
		//   is_reviewer: "1"
		// }
	]);
	let totals = ref(0);
	let page = ref(1);
	let page_size = ref(10);
	let data_select = ref(""); // 时间
	const stateOption = [{
			id: 1,
			name: "每/公斤"
		},
		{
			id: 2,
			name: "每个"
		}
	];
	const statusOption = [{
		id: 1,
		name: "保存(待补充)"
	}, {
		id: 2,
		name: "待审核(审核中)"
	}, {
		id: 3,
		name: "已审核(已上传)"
	}];
	let form = ref({
		waste_name: "",
		specs: "",
		notes: "",
		brand: "",
		price: null,
		desc: null,
		weight: "",
		model: "",
		is_reviewer: "",
		discharge_data: "",
		img: "",
		video: ""
	});
	const rules = ref({
		waste_imgs: [{
			required: true,
			message: "请上传图片",
			trigger: "blur"
		}],

		// waste_name: [{ required: true, message: "请输入废品名称", trigger: "blur" }],
		// notes: [{ required: true, message: "请输入备注", trigger: "blur" }],
		// type: [{ required: true, message: "请选择规格", trigger: "blur" }],
		// brand: [
		//   { required: true, message: "请输入品牌", trigger: "blur" }
		// ],
		// price: [
		//   { required: true, message: "请输入价格", trigger: "blur" }
		// ],
		// desc: [
		//   { required: true, message: "请输入描述", trigger: "blur" }
		// ],
		// weight: [{ required: true, message: "请输入重量", trigger: "blur" }],
		// model: [{ required: true, message: "请输入型号", trigger: "blur" }],
		// is_reviewer: [{ required: true, message: "请选择审核状态", trigger: "blur" }]
	});
	let dialogFormVisible = ref(false);
	const platForm = ref();
	let isChange = ref(false);
	onMounted(() => {
		getList();
	});

	const displayrole_type = computed(() => {
		return val => {
			if (val === "1") {
				return "审核通过";
			} else {
				return "-";
			}
		};
	});
	const displayState = computed(() => {
		return val => {
			console.log(val);
			if (val === "1") {
				return "每/公斤";
			} else if (val === "2") {
				return "每个";
			} else {
				return "-";
			}
		};
	});
	const enterDialog = () => {
		console.log(form.value)
		form.value.price = parseFloat(form.value.price);
		let params = form.value;

		platForm.value.validate(async valid => {
			if (valid) {
				if (!isChange.value) {
					waste_resourceAdd(params).then(response => {
						if (response.code === 200) {
							ElMessage({
								message: response.msg || "新增成功",
								type: "success"
							});
							closeDialog();
							page.value = 1;
							page_size.value = 10;
							getList();
						}
					});
				} else {
					waste_resourceUpdate(params).then(response => {
						if (response.code === 200) {
							ElMessage({
								message: response.msg || "修改成功",
								type: "success"
							});
							closeDialog();
							page.value = 1;
							page_size.value = 10;
							getList();
						}
					});
				}
			}
		});
	};
	const openDialog = () => {
		isChange.value = false
		dialogFormVisible.value = true;
	};
	const closeDialog = () => {
		form.value = {
			name: ""
		};
		platForm.value.resetFields();
		dialogFormVisible.value = false;
	};
	const fnDelete = row => {
		ElMessageBox.confirm("是否删除该条数据", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
			.then(async () => {
				let params = {
					id: row.id
				};
				const response = await waste_resourceDelete(params);
				if (response.code === 200) {
					ElMessage({
						type: "success",
						message: "删除成功!"
					});
					getList();
				}
			})
			.catch(() => {
				ElMessage({
					type: "info",
					message: "已取消删除"
				});
			});
	};
	const fnChange = row => {
		isChange.value = true;
		form.value = JSON.parse(JSON.stringify(row));
		console.log(form.value);
		dialogFormVisible.value = true;
	};
	const getList = () => {
		let params = {
			page: page.value,
			page_size: page_size.value,
			waste_name: searchInfo.value.waste_name,
			notes: searchInfo.value.notes,
			brand: searchInfo.value.brand,
			price: searchInfo.value.price,
			desc: searchInfo.value.desc,
			weight: searchInfo.value.weight,
			model: searchInfo.value.model,
			is_reviewer: searchInfo.value.is_reviewer,
			e_at: searchInfo.value.e_at,
			s_at: searchInfo.value.s_at,
			specs: searchInfo.value.specs,
			video: searchInfo.value.video
		};
		waste_resourceList(params).then(response => {
			if (response.code === 200) {
				tableData.value = response.data.rows || [];
				totals.value = response.data.total_rows || 0;
			}
		});
	};
	const handleCurrentChange = val => {
		page.value = val;
		getList();
	};
	const handleSizeChange = val => {
		page_size.value = val;
		getList();
	};
	const onSubmit = () => {
		page.value = 1;
		page_size.value = 10;
		if (data_select.value) {
			searchInfo.value.s_at = data_select.value[0];
			searchInfo.value.e_at = data_select.value[1];
		}

		getList();
	};
	const onReset = () => {
		searchInfo.value = {
			waste_name: "",
			type: null,
			notes: "",
			brand: "",
			price: null,
			desc: "",
			weight: "",
			model: "",
			is_reviewer: "",
			s_at: "",
			e_at: ""

		};
		page.value = 1;
		page_size.value = 10;
		totals.value = 0;
		getList();
	};

	const handleExceed = files => {
		ElMessage({
			message: "最多上传一张图片",
			type: "error"
		});
	};
	const BeforeLoad = file => {
		if (file.size > 5 * 1024 * 1024) {
			ElMessage({
				message: "当前文件大于5M，请重新选择",
				type: "error"
			});
			return;
		} else {
			const isImage = isImageMime(file.type);
			let pass = true;
			if (!isImage) {
				ElMessage.error("只能上传 jpg,png,svg,webp 格式的图片!");
				pass = false;
			}
			return pass;
		}
	};
	const BeforeLoadVideo = file => {
		if (file.size > 30 * 1024 * 1024) {
			ElMessage({
				message: "当前文件大于5M，请重新选择",
				type: "error"
			});
			return;
		} else {
			const isImage = isVideoMime(file.type);
			let pass = true;
			if (!isImage) {
				ElMessage.error("上传视频只能是 mp4,webm 格式!");
				pass = false;
			}
			return pass;
		}
	};
	const uploadSuccess = res => {
		const {
			data
		} = res;
		if (data.file) {
			form.value.img = data.file.url;
		}
	};const uploadVideoSuccess = res => {
		const {
			data
		} = res;
		if (data.file) {
			form.value.video = data.file.url;
		}
	};
</script>
<style lang="scss" scoped>
	.avatar {
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		border: 1px solid #f6f2f3;
	}

	.el-icon.avatar-uploader-icon:hover {
		box-shadow: 0 0 2px 4px rgba(246, 242, 243, 0.3);
	}

	.img-box:hover {
		box-shadow: 0 0 2px 4px rgba(246, 242, 243, 0.3);
	}

	.img-box {
		width: 100px;
		height: 100px;
		border: 1px solid #f6f2f3;
		padding: 4px;
		border-radius: 4px;
		box-sizing: border-box;
		margin-right: 10px;

		.img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.upload {
		display: flex;
		.el-form-item {
			width: 100px;
		}
	}.uploadVideo {
		display: flex;
		.el-form-item {
			width: 100px;
		}
	}
</style>